<template>
  <!-- 详情侧边窗 -->
  <el-drawer
    @close="close"
    v-bind="$attrs"
    :title="title"
    :size="size"
    :visible.sync="visible"
    ref="drawer"
  >
    <div class="detail-drawer-container">
      <div class="detail-drawer-content">
        <el-alert v-if="showTip" title="温馨提示" type="info" :closable="false" show-icon>
          <slot name="tipDesc"></slot>
        </el-alert>
        <slot></slot>
      </div>
      <div class="deatil-drawer__footer">
        <el-button v-if="showCloseBtn" type="primary" @click="$refs.drawer.closeDrawer()">我知道了</el-button>
        <slot name="btn"></slot>
      </div>
    </div>
  </el-drawer>
</template>
<script>
export default {
  props: {
    showTip: {
      type: Boolean,
      default: true
    },
    showCloseBtn: {
      type: Boolean,
      default: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: "30%"
    },
    title: {
      type: String,
      default: "标题"
    }
  },
  data() {
    return {
      // drawer: false,
    };
  },
  watch: {
    // visible:
  },
  methods: {
    close() {
      this.$emit("close");
      this.$emit("update:visible", false);
    }
  }
};
</script>
